<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-10-17 17:07:42
 * @LastEditTime: 2019-10-17 17:07:42
 * @LastEditors: your name
 -->
<template>
  <div class="goodsList">
    <router-link class="goodsItem" v-for="item in goodsList" :key="item.id" :to="'/home/goodsInfo/'+item.id" tag="div">
      <img :src="item.img_url">
      <div class="itemTitle">{{item.title}}</div>
      <div class="itemInfo">
        <div class="price">
          <span class="sell_price">￥{{item.sell_price}}</span>
          <span class="market_price">￥{{item.market_price}}</span>
        </div>
        <div class="quantity">
          <span>热卖中</span>
          <span>剩{{item.stock_quantity}}件</span>
        </div>
      </div>
    </router-link>
    <mt-button type="danger" size="large" @click="getMore">加载更多</mt-button>
  </div>
</template>
<script>
export default {
  data(){
    return{
      pageIndex:1,
      goodsList:[],
    }
  } ,
  created(){
    this.getGoodsList()
  },
  methods: {
    getGoodsList(){
      this.$http.get('api/getgoods?pageindex='+this.pageIndex).then(result=>{
        var res = result.body
        if(res.status===0){
          this.goodsList = this.goodsList.concat(res.message)
        }
      })
    },
    getMore(){
      this.pageIndex++
      this.getGoodsList()
    }
  },
}
</script>
<style lang="scss" scoped>
  .goodsList{
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    padding: 7px;
    .goodsItem{
      width: 49%;
      border: 1px solid #ccc;
      box-shadow: 0 0 8px #ccc;
      margin-top: 5px;
      display: flex;
      flex-direction: column;
      justify-content:space-between;
      img{
        width: 100%;
      }
      .itemTitle{
        font-size: 13px;
        font-weight: bold;
      }
      .itemInfo{
        padding: 5px;
        background-color: #eee;
        .price{
          .sell_price{
            font-size: 14px;
            color: red;
          }
          .market_price{
            font-size: 11px;
            color: #333;
            text-decoration: line-through;
          } 
        }
         .quantity{
            font-size: 12px;
            color: #333;
            display: flex;
            margin:5px;
            justify-content: space-between
          }

      }
    }
    button{
      margin:10px 0;
    }
  }
</style>